<template>
    <div class="fixed-tool">
        <div class="tool-item tool1" @click="backTop"></div>
        <el-popover
            placement="left"
            trigger="hover"
            :visible-arrow="false"	
            popper-class="tool1-popper"
        >
            <div class="code-img">
                <vue-qr
                    :logoSrc="qrImg"
                    :text="`http://fls.xszkh5.ilawpress.com/_md/lib/h5/index#/home`"
                    :size="70"
                    :margin="0"
                    colorDark="black"
                    colorLight="white"
                ></vue-qr>
            </div>
            <div class="tool-item tool2" slot="reference"></div>
        </el-popover>
        <el-popover
            placement="left"
            trigger="hover"
            popper-class="tool2-popper"
        >   
            <div class="popover-cont">
                <div class="popove-tit">畅享全库资源</div>
                <div class="popove-txt">开通机构账号，尊享定制化服务。</div>
                <div class="ctheme fs18 fw">
                    <i class="el-icon-service"></i>
                    <span class="ml10">4008-111-111</span>
                </div>
            </div>
            <div class="tool-item tool3" slot="reference"></div>
        </el-popover>
        <el-popover
            placement="left"
            trigger="hover"
            popper-class="tool2-popper"
        >   
            <div class="popove-tit">专业库</div>
            <ul class="quick-nav">
                <li><a href="https://www.ilawpress.com/" target="_bank">有章阅读</a></li>
                <li><a href="#" target="_bank">有章法考</a></li>
                <li><a href="http://br.ilawpress.com/" target="_bank">“一带一路”知识服务平台</a></li>
            </ul>
            <div class="tool-item tool4" slot="reference"></div>
        </el-popover>
    </div>
</template>

<script>
import vueQr from "vue-qr";
export default {
    name: "xszkFixedTool",
    components:{
        vueQr,
    },
    props:{
        
       
    },
    computed: {
        
    },
    data() {
        return {
            qrImg: require('@/static/images/qr_img.jpg'),
            scrollTop:0,
        };

    },
    methods: {
        backTop () {
            let that = this
            let timer = setInterval(() => {
                let ispeed = Math.floor(-that.scrollTop / 5);
                document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed;
                if (that.scrollTop === 0) {
                    clearInterval(timer)
                }
            }, 16)
        },
        scrollToTop () {
            let that = this;
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            that.scrollTop = scrollTop;
            // if (that.scrollTop > 60) {
            //     that.btnFlag = true
            // } else {
            //     that.btnFlag = false
            // }
        }
       
    },
    created() {
        
    },
    mounted(){
        window.addEventListener('scroll', this.scrollToTop)
    },
    destroyed () {
        window.removeEventListener('scroll', this.scrollToTop)
    },
   

};
</script>

<style lang="stylus" scoped>
.fixed-tool
    position fixed
    top 40%
    right 4%   
    width 40px
    height 200px
    z-index 999
    .tool-item
        width 40px
        height 40px
        margin-bottom 10px
        box-shadow 0px 2px 4px 0px rgba(0, 0, 0, 0.06)
        border-radius 6px
        cursor pointer
    .tool1
        background url('../static/images/toolTop.png') #fff no-repeat center
        background-size 20px 14px
    .tool1:hover
        background url('../static/images/toolTopA.png') #fff no-repeat center
        background-size 20px 14px
    .tool2
        background url('../static/images/toolPhone.png') #fff no-repeat center
        background-size 17px 20px
    .tool2:hover
        background url('../static/images/toolPhoneA.png') #fff no-repeat center
        background-size 17px 20px
    .tool3
        background url('../static/images/toolVip.png') #fff no-repeat center
        background-size 20px 18px
    .tool3:hover
        background url('../static/images/toolVipA.png') #fff no-repeat center
        background-size 20px 18px
    .tool4
        background url('../static/images/toolBook.png') #fff no-repeat center
        background-size 19px 18px
    .tool4:hover
        background url('../static/images/toolBookA.png') #fff no-repeat center
        background-size 19px 18px
.code-img
    width 80px
    height 80px
    padding 5px
    box-shadow 0 2px 4px 0 rgba(158, 166, 175, 0.5)
    background #fff
    text-align center
.popover-cont
    width 158px
    margin 0 auto    
.popove-tit
    width 158px
    margin 0 auto
    font-weight bolder
    font-size 16px
    padding 5px 0
    text-align center
    border-bottom 1px solid #D7D7D7
.popove-txt
    font-size 14px
    margin 25px auto 16px auto
.quick-nav li>a
    display block
    margin-top 5px
    cursor pointer
    width 100%
    height 30px
    line-height 31px
    text-align center
    font-size 15px
.quick-nav li>a:hover
    background #3266CC
    color #fff
</style>
